<template>
  <div class="nav-menu">
    <el-menu router v-model="currentMenu" :default-active="currentMenu" :collapse="menuData.isCollapse" background-color="#212529"
      text-color="#a2a1a1" active-text-color="#ffffff" :collapse-transition="false">
      <template v-for="(menu,menuIndex) in navMeus">
        <el-menu-item :key="`menu_${menu.permissionId}`" v-if="menu.children.length===0" :index="menu.path">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.name}}</span>
        </el-menu-item>
        <el-submenu :key="`menu_${menu.permissionId}`" v-else :index="menuIndex+''">
          <template slot="title">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.name}}</span>
          </template>
          <template v-for="item in menu.children">
            <el-menu-item :key="`menu_${item.permissionId}`" :index="item.path">{{item.name}}</el-menu-item>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    props: {
      menuData: {
        type: Object,
        required: true
      }
    },

    computed: {
      navMeus() {
        return this.menuData.menusList;
      }
    },

    watch: {
      '$route'() {
        this.resetMenu();
      }
    },

    data() {
      let currentMenu = this.$route.path;
      return {
        currentMenu
      };
    },

    methods: {
      resetMenu() {
        this.currentMenu = this.$route.path;
      }
    }
  };

</script>

<style lang="scss" scoped>
  .nav-menu {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .el-menu {
      border-right: none;
    }
  }

</style>
